/**
 * 基本信息
 */
import React from 'react';
import { Form, Input, Spin, TreeSelect } from 'antd';
import { connect } from 'umi';
import { get as getPath } from 'object-path';
import OrganizationSelect from '@/components/OrganizationSelect';
import {
    // useInstitutions,
    useEmployeeList
} from '../hooks';
import styles from '../style.less';

const formLayout = {
    wrapperCol: { span: 18 },
    labelCol: { span: 6 }
};

const commonRules = [{ required: true, message: '请输入必填项' }];

const Base = ({ form, data }) => {
    const [selectedCompanyId, setSelectedCompanyId] = React.useState(getPath(data, 'companyCode', '') || undefined);

    // const [institutions] = useInstitutions(getPath(data, 'companyId', '') || companyId); // 关联制度
    const [employeeList, fetchEmployeeListLoading] = useEmployeeList(selectedCompanyId); // 关联制度

    const handleCompanyChange = (_, option) => {
        setSelectedCompanyId(_);
        form.setFieldsValue({
            companyName: option && option.length > 0 ? option[0] : '',
            employeeHeadCodeList: [],
            employeeCodeList: []
        });
        // form.resetFields(['employeeHeadCodeList', 'employeeCodeList']);
    };

    // const handleInstitutionChange = (_, option) => {
    //     const { props = {} } = option;
    //     const { children = '' } = props;
    //     form.setFieldsValue({ institutionName: children });
    // };
    return (
        <Form {...formLayout} className={styles.form}>
            <Form.Item label="适用公司" className={styles.formItem}>
                {form.getFieldDecorator('companyCode', {
                    rules: [{ required: true, message: '请选择适用公司' }],
                    initialValue: data?.companyCode
                })(<OrganizationSelect isStrictly maxTagCount={2} isNeedPermission onChange={handleCompanyChange} />)}
            </Form.Item>
            <Form.Item label="适用公司" style={{ display: 'none' }}>
                {form.getFieldDecorator('companyName', {
                    rules: [{ required: true, message: '请选择适用公司' }],
                    initialValue: getPath(data, 'companyName', '')
                })(<Input />)}
            </Form.Item>
            {/* <Form.Item label="关联制度" className={styles.formItem}>
                {form.getFieldDecorator('institutionId', {
                    rules: [{ required: true, message: '请选择关联制度' }],
                    initialValue: getPath(data, 'institutionId', undefined)
                })(
                    <Select placeholder="请选择关联制度" onChange={handleInstitutionChange}>
                        {institutions.map(item => (
                            <Select.Option value={item.value} key={item.value}>
                                {item.label}
                            </Select.Option>
                        ))}
                    </Select>
                )}
            </Form.Item> */}
            {/* <Form.Item label="关联制度" className={styles.hide} style={{ display: 'none' }}>
                {form.getFieldDecorator('institutionName', {
                    rules: [{ required: true, message: '请选择关联制度' }],
                    initialValue: getPath(data, 'institutionName', '')
                })(<Input />)}
            </Form.Item> */}
            <Form.Item label="考勤组名称" className={styles.formItem}>
                {form.getFieldDecorator('groupName', {
                    rules: [
                        { required: true, message: '请输入考勤组名称' },
                        { min: 1, max: 50, message: '只能输入 1-50 个字' }
                    ],
                    initialValue: getPath(data, 'groupName', '')
                })(<Input placeholder="请输入考勤组名称" allowClear />)}
            </Form.Item>
            <div className={styles.formItem}>
                <Spin spinning={fetchEmployeeListLoading}>
                    <Form.Item label="考勤组负责人" className={styles.formItemInner}>
                        {form.getFieldDecorator('employeeHeadCodeList', {
                            rules: [
                                { required: true, message: '请选择考勤组负责人' },
                                {
                                    validator: async (_, value) => {
                                        let newArr;
                                        if (value && value.length > 3) {
                                            newArr = [].concat(value.slice(0, 3));
                                            form.setFieldsValue({
                                                employeeHeadCodeList: newArr
                                            });
                                            throw new Error('最多选择三个负责人');
                                        } else {
                                            newArr = value;
                                        }
                                    }
                                }
                            ],
                            initialValue: getPath(data, 'employeeHeadCodeList', undefined)
                        })(
                            // <Select mode="multiple" placeholder="请选择考勤组负责人" allowClear optionFilterProp="children">
                            //     {employeeList?.map(item => (
                            //         <Select.Option value={item.value} key={item.value}>
                            //             {item.label}
                            //         </Select.Option>
                            //     ))}
                            // </Select>
                            <TreeSelect
                                multiple
                                showArrow
                                allowClear
                                showSearch
                                maxTagCount={3}
                                placeholder="请选择考勤组负责人"
                                dropdownStyle={{ maxHeight: 250, overflow: 'auto' }}
                                getPopupContainer={trigger => trigger.parentNode}
                                treeDefaultExpandAll
                                treeNodeFilterProp="title"
                                treeData={employeeList}
                            />
                        )}
                    </Form.Item>
                </Spin>
                <Form.Item label=" " colon={false} className={styles.formItemInner}>
                    负责人可以对排班制考勤组进行排班
                </Form.Item>
            </div>
            <div className={styles.formItem}>
                <Spin spinning={fetchEmployeeListLoading}>
                    <Form.Item label="考勤组人员" className={styles.formItemInner}>
                        {form.getFieldDecorator('employeeCodeList', {
                            rules: [{ required: true, message: '请选择考勤组人员' }],
                            initialValue: getPath(data, 'employeeCodeList', undefined)
                        })(
                            <TreeSelect
                                multiple
                                showArrow
                                allowClear
                                showSearch
                                maxTagCount={10}
                                placeholder="请选择考勤组人员"
                                dropdownStyle={{
                                    maxHeight: 250,
                                    overflow: 'auto'
                                }}
                                getPopupContainer={trigger => trigger.parentNode}
                                treeDefaultExpandAll
                                treeNodeFilterProp="title"
                                treeData={employeeList}
                            />
                        )}
                    </Form.Item>
                </Spin>
            </div>
            <div className={styles.formItem}>
                <Form.Item label="考勤组时区" className={styles.formItemInner}>
                    {form.getFieldDecorator('timezone', { rules: commonRules, initialValue: 'GMT+08:00 中国标准时间' })(
                        <Input placeholder="请输入考勤组时区" disabled />
                    )}
                </Form.Item>
                <Form.Item label=" " colon={false} className={styles.formItemInner}>
                    本考勤组将采用该时区进行考核
                </Form.Item>
            </div>
        </Form>
    );
};

export default connect(({ user }) => ({ user: user.currentUser }))(Base);
